<template>
  <footer class="message-footer" v-show="show" @click="showFaceDialog({bShow:false})">
    <transition name="fade">
      <keep-alive>
        <face v-if="bFace" @add-face="addFace"></face>
      </keep-alive>
    </transition>
    <div class="left">
      <i class="iconfont icon-expression" @click.stop="showFaceDialog"></i>
      <!-- <i class="iconfont icon-nimgs"></i> -->
    </div>
    <div class="input" contenteditable="true" @input="changMessage" @click="scrollShow"></div>
    <ec-button
    text="发送"
    @click.native="thisSendMessage({
      msg: message,
      uid: $route.query.id,
      goods_id: $route.query.goods_id
    });"></ec-button>
  </footer>
</template>

<script>
import { mapState, mapActions } from 'vuex';

import Button from '@/components/Button';
import Face from '@/components/chat/Face';

export default {
  name: 'chat-footer',
  data() {
    return {
      message: '',
      num: 0
    };
  },
  components: {
    'EcButton': Button,
    Face
  },
  computed: {
    ...mapState('chat/messageBottomInput', [
      'show'
    ]),
    ...mapState([
      'bFace'
    ])
  },
  methods: {
    ...mapActions('chat', [
      'sendMessage'
    ]),
    ...mapActions([
      'showFaceDialog'
    ]),
    /**
     * 插入图片
     * 
     * @param {String} face - 图片路径
     */
    addFace(face) {
      this.message += face;
      this.$el.querySelector('.input').innerHTML += face;
    },
    scrollShow() {
      let oInput = this.$el.querySelector('.input');
      setTimeout(() => {
        oInput.scrollIntoViewIfNeeded();
      }, 400);
    },
    changMessage(e) {
      this.message = e.srcElement.innerHTML;
    },
    thisSendMessage(o) {
      this.sendMessage(o);
      this.message = '';
      this.$el.querySelector('.input').innerHTML = '';
      this.$el.querySelector('.input').focus();
    }
  }
};
</script>

<style lang="scss" scoped>
@import '../../assets/style/config';
@import '../../assets/style/mixins/common';
.message-footer {
  position: absolute;
  width:100%;
  padding:.8rem 1rem;
  bottom:0;
  align-items: flex-end;
  background:$write-color;
  border-top:1px solid $tool-bg;
  @include disBox();
  @include disFlex();
  img{
    display:inline-block;
    vertical-align: middle;
  }
  .input{
    font-size:1.3rem;
    padding:.6rem;
    border:0;
    min-height: 2.6rem;
    max-height:8rem;
    overflow-y:auto;
    background: #eee;
    width:100%;
    border-radius: 4px;
    margin-right:.8rem;
    @include flex1-1(); 
  }
  button{
    font-size:1.3rem;
    min-height:2.6rem;
    padding:.6rem;
    width:initial;
    display:initial;
  }
  .left{
    .iconfont{
      font-size:2.2rem;
      margin-right:.8rem;
      display:inline-block;
      color:$title-color;
    }
  }
}
.face{
  bottom:5.4rem;
}
.fade-enter-active, .fade-leave-active {
  transition: all .2s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active in below version 2.1.8 */ {
  transform: scale(.8);
  opacity: 0
}
</style>


